<template>
  <el-dialog
      :model-value="updateDialogVisible"
      title="考试结果信息修改"
      width="50%"
      draggable
      center
      @close="handleClose"
  >
    <el-form ref="updatefrom" :model="form" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="考试编号：" prop="examId">
            <el-input v-model="form.examId" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="考试人编号：" prop="userId">
            <el-input v-model="form.userId" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="考试分数：" prop="grade">
            <el-input v-model="form.grade" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发布日期：" prop="date">
            <el-date-picker
                v-model="form.date"
                type="date"
                placeholder=""
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleCommit">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref,watch} from "vue";
import {ElMessage} from "element-plus";
import {UpdateExanResult} from "@/api/exam_result";
//获取父组件方法或传值
const props = defineProps({
  DialogTableValue:{
    type:Object,
    default:() => {}
  },
  initGetStudents:{
    type:Function,
    required:true
  }
})
//初始化表单
const form = ref({})
const updatefrom=ref(null)

//表单重置
const resetupdatefrom = () =>{
  updatefrom.value.resetFields()
}
//对话框动作
const Emits=defineEmits(['update:modelValue'])
const handleClose=()=>{
  Emits('update:modelValue',false)
}
//监听表单数据变化
watch(()=>props.DialogTableValue,()=>{
  // console.log(props.DialogTableValue)
  form.value=props.DialogTableValue
},{deep:true,immediate:true})

//修改
const handleCommit= async ()=>{
      await UpdateExanResult(form.value).then(res=>{
        if(res.code===20031){
          ElMessage({
            message: '修改成功',
            type: 'success',
          })
        }else {
          ElMessage({
            message: '修改失败',
            type: 'error',
          })
        }
        props.initGetStudents()
      })

  handleClose()
}
</script>

<style scoped>

</style>